<template>
	<view>
		<uv-list>
			<uv-list-item v-for="(item,index) in flowList" :key="index">
				<view class="item-box">
					<view class="title">
						{{item.noticeTitle}}
					</view>
					<view class="content">
						{{item.noticeText}}
					</view>
					<view class="date">
						{{item.createTime}}
					</view>
				</view>
				<uv-line></uv-line>
			</uv-list-item>
		</uv-list>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore"></u-loadmore>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import {getNoticeListApi} from '../../src/api/index.js'
	import { onReady,onReachBottom } from '@dcloudio/uni-app'
	const loadStatus = ref('loadmore')
	const pages = ref(0)
	const flowList = ref([])
	const parms = reactive({
		currentPage:1,
		pageSize:5
	})
	//获取列表数据
	const getList = async()=>{
		let res = await getNoticeListApi(parms)
		if(res && res.code == 200){
			console.log(res)
			flowList.value = flowList.value.concat(res.data.records)
			pages.value = res.data.pages
		}
	}
	//加载更多
	const loadMore = ()=>{
		console.log('点击加载更多')
		//如果当前页大于总页数，说明没有数据了
		if(parms.currentPage >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		parms.currentPage = ++parms.currentPage;
		//获取数据
		getList()
	}
	//触底加载
	onReachBottom(()=>{
		console.log('触底加载')
		//如果当前页大于总页数，说明没有数据了
		if(parms.currentPage >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		parms.currentPage = ++parms.currentPage;
		//获取数据
		getList()
	})
	onReady(()=>{
		getList()
	})
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFF;
	}
.item-box{
	padding: 20rpx 30rpx;
	.title{
		color: #606266;
		font-size: 32rpx;
	}
	.content{
		color: #999;
		font-size: 28rpx;
		padding: 10rpx 0rpx;;
	}
	.date{
		color: #999;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-end;
	}
}
</style>
